<script setup lang="ts">
import userInfoStore from "../stores/userInfoStore.ts";
import menuListStore from "../stores/menuListStore.ts";
import baseInfoStore from "../stores/baseInfoStore.ts";
import {DownOutlined, ExclamationCircleOutlined} from '@ant-design/icons-vue'
import {onMounted, ref, createVNode} from "vue";
import {message, Modal} from "ant-design-vue";

const userStore:any = userInfoStore()
const menuStore = menuListStore()
const baseStore = baseInfoStore()


const avatar = userStore.userAllInfo.headSculpture
async function logOut(){
  Modal.confirm({
    title: '确定要退出登录吗？',
    icon: createVNode(ExclamationCircleOutlined),
    okText:'退出登录',
    okType:'danger',
    async onOk() {
      try {
        userStore.clearUserInfo()
      }catch (e:any){
        message.error(e.message)
      }
    },
    onCancel() {
      console.log('Cancel');
    },
  });
}

const mainMenuCurrent = ref(menuStore.mainMenuCurrent)
const buttonFontValue = ref()

function handleClickMainMenu({ item }: { item: any }){
  menuStore.mainLoading = true
  menuStore.mainMenuCurrent = [item.originItemValue.key]
  menuStore.updateList(item.menuList)
}
function getLabelByValue(value:any) {
  const option = baseStore.brandList.find(option => option.value === value);
  return option ? option.label : '';
}
onMounted(()=>{
  buttonFontValue.value = getLabelByValue(baseStore.currentBrand)
})
</script>

<template>
  <div class="header_wrap">
    <a-menu
        :style="{transform: `translateX(${menuStore.mainMenuLeftPosition})`}"
        class="mainMenu"
        v-model:selectedKeys="mainMenuCurrent"
        mode="horizontal"
        @click="handleClickMainMenu"
        :items="menuStore.fullMenuList">
    </a-menu>
    <div class="feature-menu-item">
      <a-popover trigger="click" placement="topRight">
        <template #content>
          <a-button type="link" block @click="logOut"> 退出登录 </a-button>
        </template>
        <div class="user-avatar-item">
          <a-avatar class="user-avatar" :size="30" :src="avatar">
          </a-avatar>
          <span class="nickname">{{userStore.userName}}</span>
          <DownOutlined class="avatar_icon" />
        </div>
      </a-popover>
    </div>
  </div>
</template>

<style scoped lang="scss">
.header_wrap{
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  padding: 0 50px;
  align-items: center;
  box-shadow: 0 0 16px #d3d3d3,
  0 0 0 #ededed;
}
.mainMenu{
  transition:  all 0.3s;
}
.user-avatar-item{
  display: flex;
  align-items: center;
  cursor: pointer;
  .nickname{
    margin: 0 6px 0 8px;
  }
  .avatar_icon{
    font-size: 14px;
  }
}
.user-avatar{
  cursor: pointer;
}
</style>